<template>
    <div class="footer-info clearBoth">
        <el-row :gutter="10" class="clearBoth">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-row :gutter="10">
                    <el-col :xs="6" :sm="8" :md="10" :lg="8" :xl="8">
                        <div class="logo-title clearBoth">
                            <!-- <span class="logo logo-img"></span> -->
                            <img :src="logoRed">
                        </div>
                    </el-col>
                    <el-col :xs="2" :sm="3" :md="1" :lg="1" :xl="1">
                        <img :src="splitRed" class="split-red"/>
                    </el-col>
                    <el-col :xs="16" :sm="13" :md="13" :lg="15" :xl="15">
                        <div class="contract red-content">
                            <div class="relative">
                                <div class="label">
                                    <span class="el-icon-location location"></span>
                                    <span>北京市</span>
                                    <span class="mg-left-01">石景山</span>
                                </div>
                                <div class="label">
                                    <span>银河南街2号</span>
                                </div>
                                <div class="label">
                                    <span>紫寓国际</span>
                                    <span class="mg-left-01">3号楼1507</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="small-top" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-row :gutter="10">
                    <el-col :xs="6" :sm="8" :md="10" :lg="8" :xl="6">
                        <div class="title">
                            <span class="title-span">CONTACT</span>
                        </div>
                    </el-col>
                    <el-col :xs="2" :sm="3" :md="1" :lg="1" :xl="1">
                        <img :src="splitRed" class="split-red"/>
                    </el-col>
                    <el-col :xs="16" :sm="11" :md="13" :lg="15" :xl="17">
                        <div class="contract red-content">
                            <div class="label larger-space">
                                <span class="el-icon-phone larger-icon"></span>
                                <span class="mg-left-01 larger-font">010-6866523</span>
                            </div>
                            <div class="label larger-space">
                                <span class="el-icon-message larger-icon"></span>
                                <span class="mg-left-01 larger-font">254562517@qq.com</span>
                            </div>
                            <div class="label larger-space">
                                <span class="el-icon-s-comment larger-icon"></span>
                                <span class="mg-left-01 larger-font">Shanghe-media</span>
                            </div>
                            <div class="label larger-space">
                                <span class="el-icon-present larger-icon"></span>
                                <span class="mg-left-01 larger-font">Shanghe-media</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div class="version">
            <span>©2017 - 2020 Shanghe-media</span>
        </div>
    </div>
</template>
<script>
import logoRed from '@/assets/images/logo_red.png';
import splitRed from '@/assets/images/split_red.png'
export default {
    data() {
        return {
            logoRed:logoRed,
            splitRed:splitRed
        }
    }
}
</script>
<style lang="less" scoped>
.footer-info {

    padding: 0rem .8rem 0 .8rem;
    position: relative; 

    margin-top: .8rem;
    margin-left:.5rem;
    // .logo-title::after {
    //     content: "";
    //     display: block;
    //     width: .2rem;
    //     height: auto;
    // }
    .mg-top {
        margin-top: .5rem;
    }
    .red-content {
        // border-left: solid 0.1rem #e72119;
        padding-left: .5rem;
        margin-top: 8px;
        .location {
            position: absolute;
            left: -0.3rem;
            font-size: .25rem;
        }

    }
    .version {
        margin-top: .2rem;
        font-size: 0.2rem;
        color: #7d7471;
    }
}

.split-red {
    width: 70%;
    display: block;
}

.logo-title{
    margin-top:8px;
}

.logo-title img{
    width:70%;
    display: block;
}

.footer-info .title {
    .title-span {
        font-weight: 600;
        position: absolute;
        font-size: 0.25rem;
    }
    margin-top:8px;
    height: .3rem;
    span {
        font-size: 0.2rem;
    }
}
.footer-info .contract {
    .label {
        height: 0.35rem;
        font-size:0.1rem;
    }
    span {
        font-size: 0.2rem;
        font-weight: 600;
    }
}

.larger-icon{
    font-size: 0.25rem !important;
    margin-bottom: 0.1rem !important;
}

.larger-font{
    font-size:0.23rem !important;
}

.larger-space{
    margin-bottom: 0.2rem;
}

@media screen and (max-width: 768px) {
    .small-top {
        margin-top: .3rem;
    }

    .footer-info{
        padding: 0 .2rem 0 .2rem;
    }
}
@media screen and (min-width: 540px) and (max-width: 768px) { 
    .footer-info {
        .red-content {
            padding-left: .8rem;
        }
    }
}

@media screen and (max-width: 540px) {
    .footer-info {
        .red-content {
            padding-left: .8rem;
        }
    }
}
</style>